<template>
  <div>
    <headerMiddle title="我的关注" />
    <div class="item" v-for="(item,index) in myFollows" :key="index">
      <!-- 这里是每一个关注的框框 v-for 来遍历数据 -->
      <img :src="item.head_img" alt class="avatar" />
      <div class="itemMiddle">
        <div class="name">{{item.nickname}}</div>
        <div class="date">2019-10-04</div>
      </div>
        <!-- 取消关注哪一个用户,就将当前的用户id 传进去 -->
      <div class="btnCancel" @click="cancelFollow(item.id)">取消关注</div>
    </div>
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
export default {
  components: {
    headerMiddle
  },
  data() {
    return {
      myFollows: []
    };
  },
  
  methods: {
    loadPage(){
    this.$axios({
      url: "/user_follows",
      method: "get"
    }).then(res => {
       console.log(res.data);
      // 数据是我们 res.data.data
      // 要将这个数据放入一个 data 数控里面 进行渲染
      this.myFollows = res.data.data;
      // 向用户中心那里一样,遍历兵器处理好头像的数据
       this.myFollows.forEach(Element=>{
         if(!Element.head_img){
           Element.head_img ='/static/imgs/11.png'
         }else{
           Element.head_img = this.$axios.defaults.baseURL + Element.head_img
         }
       })
    });
    },

  // 取关
  cancelFollow(id){
    this.$axios({
      url:'/user_unfollow/' + id,
      method:'get'
    }).then(res=>{
      this.loadPage()
    })
  }

  },
  mounted() {
    this.loadPage()
  }
};
</script>
<style lang="less" scoped>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6.944vw 5.556vw;
  border-bottom: 1px solid #eee;
  .avatar {
    height: 11.111vw;
    width: 11.111vw;
    border-radius: 50%;
  }
  .itemMiddle {
    flex: 1;
    padding-left: 2.778vw;
    .date {
      font-size: 3.889vw;
      color: #949494;
    }
  }
  .btnCancel {
    padding: 2.778vw;
    color: #363636;
    background: #e1e1e1;
    border-radius: 5.556vw;
  }
}
</style>